<template>
  <div id="gantt_container" style="width: 100%; height: 500px"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

// 模拟的任务数据
const tasks = {
  data: [
    {
      id: '10',
      text: '员工 #1',
      render: 'split',
      start_date: '04-12-2024 9:00',
      duration: 0,
      order: 10,
      progress: 0.4
    },
    {
      id: '1',
      text: '项目 #1',
      start_date: '04-12-2024 9:00',
      duration: 30,
      order: 10,
      progress: 0.6,
      parent: '10'
    },
    {
      id: '2',
      text: 'Task #2',
      start_date: '04-12-2024 12:00',
      duration: 15,
      order: 20,
      progress: 0.6,
      parent: '10'
    },
    {
      id: '3',
      text: 'Task #3',
      start_date: '04-12-2024 14:00',
      duration: 60,
      order: 10,
      progress: 0.6,
      parent: '10'
    },
    {
      id: '4',
      text: 'Task #4',
      start_date: '04-12-2024 18:00',
      duration: 100,
      order: 20,
      progress: 0.6,
      parent: '10'
    }
  ]
}

onMounted(() => {
  gantt.locale.labels.section_split = 'Display'

  gantt.config.open_split_tasks = true

  gantt.attachEvent('onBeforeSplitTaskDisplay', function (id, task, parent) {
    if (task.$rendered_at != task.parent) {
      return false
    }
    return true
  })
  // 初始化甘特图
  gantt.init(document.getElementById('gantt_container'))
  //格式化时间
  gantt.config.date_format = '%Y-%m-%d'
  gantt.config.work_time = true
  gantt.setWorkTime({ hours: ['9:00-20:00'] })
  gantt.config.scales = [
    {
      unit: 'hour',
      step: 1,
      format: '%H:%i'
    },
    {
      unit: 'minute',
      step: 15,
      format: '%i'
    }
  ] //时间刻度
  const now = new Date()
  gantt.config.start_date = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 9) //开始时间
  gantt.config.end_date = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 21) //结束时间
  gantt.config.duration_unit = 'minute' //an hour
  gantt.config.duration_step = 1
  // 格式化语言

  gantt.i18n.setLocale({
    date: {
      month_full: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ],
      month_short: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ],
      day_full: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      day_short: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    },
    labels: {
      new_task: '新建',
      icon_save: '保存',
      icon_cancel: '取消',
      icon_details: '详情',
      icon_edit: '修改',
      icon_delete: '删除',
      gantt_save_btn: '保存',
      gantt_cancel_btn: '取消',
      gantt_delete_btn: '删除',
      confirm_closing: '', // Your changes will be lost, are you sure?
      confirm_deleting: '任务将被永久删除，您确定吗?',
      section_description: '说明',
      section_time: '时间周期',
      section_type: '类型',

      /* grid columns */
      column_wbs: 'WBS',
      column_text: '员工名称',
      column_start_date: '开始时间',
      column_duration: '周期',
      column_add: '',

      /* link confirmation */
      link: 'Link',
      confirm_link_deleting: '将被删除',
      link_start: ' (开始)',
      link_end: ' (结束)',

      type_task: '任务',
      type_project: '项目',
      type_milestone: '里程碑',

      minutes: '分',
      hours: '时',
      days: '天',
      weeks: '周',
      months: '月',
      years: '年',

      /* message popup */
      message_ok: '确定',
      message_cancel: '取消',

      /* constraints */
      section_constraint: 'Constraint',
      constraint_type: 'Constraint type',
      constraint_date: 'Constraint date',
      asap: 'As Soon As Possible',
      alap: 'As Late As Possible',
      snet: 'Start No Earlier Than',
      snlt: 'Start No Later Than',
      fnet: 'Finish No Earlier Than',
      fnlt: 'Finish No Later Than',
      mso: 'Must Start On',
      mfo: 'Must Finish On',

      /* resource control */
      resources_filter_placeholder: 'type to filter',
      resources_filter_label: 'hide empty'
    }
  })
  // 格式化表格
  // gantt.config.columns = [
  //   { name: 'name', label: 'Task name', tree: true, width: '*' },

  //   { name: 'text', label: 'Task name', tree: true, width: '*' },
  //   { name: 'start_date', label: 'Start time', align: 'center' },
  //   { name: 'duration', label: 'Duration', align: 'center' }
  // ]
  // gantt.config.columns = [{ name: 'text', label: '员工', width: '100', align: 'center' }]

  // 开启显示任务进度条
  gantt.config.show_task_percent = true

  // 解析任务数据并渲染甘特图
  gantt.parse(tasks)
})
</script>

<style scoped>
/* 这里可以添加组件相关的局部样式 */
</style>
